<template>
    <div class="main-scrollbar">
        <div class="module">
            <div class="module-header">
                <div class="module-header-title">自定义设置</div>
                <div class="module-header-subtitle">
                    开启后，可调整RFM三个指标的得分规则，通过计算每个客户的得分与均值的对比，对客户进行智能分群。
                </div>
            </div>
        </div>
        <div class="form">
            <div class="form-item">
                <div class="form-item-row header">
                    <div class="form-item-row-column">最近一次消费(R)</div>
                    <div class="form-item-row-column">分值</div>
                </div>
                <div
                    class="form-item-row"
                    v-for="(item, index) in rlist"
                    :key="index"
                >
                    <template v-if="item.score === 5">
                        <div class="form-item-row-column">
                            <el-input v-model="item.max"></el-input>
                            <div style="margin:0 10px;">天以内</div>
                        </div>
                        <div class="form-item-row-column">{{ item.score }}</div>
                    </template>
                    <template v-else-if="item.score === 1">
                        <div class="form-item-row-column">
                            <el-input v-model="item.min"></el-input>
                            <div style="margin:0 10px;">天以上</div>
                        </div>
                        <div class="form-item-row-column">{{ item.score }}</div>
                    </template>
                    <template v-else>
                        <div class="form-item-row-column">
                            <el-input v-model="item.min"></el-input>
                            <div style="margin:0 10px;">-</div>
                            <el-input v-model="item.max"></el-input>
                            <div style="margin:0 10px;">天</div>
                        </div>
                        <div class="form-item-row-column">{{ item.score }}</div>
                    </template>
                </div>
            </div>
            <div class="form-item">
                <div class="form-item-row header">
                    <div class="form-item-row-column">消费频率(F)</div>
                    <div class="form-item-row-column">分值</div>
                </div>
                <div
                    class="form-item-row"
                    v-for="(item, index) in flist"
                    :key="index"
                >
                    <template v-if="item.score === 5">
                        <div class="form-item-row-column">
                            <el-input v-model="item.max"></el-input>
                            <div style="margin:0 10px;">次以上</div>
                        </div>
                        <div class="form-item-row-column">{{ item.score }}</div>
                    </template>
                    <template v-else-if="item.score === 1">
                        <div class="form-item-row-column">
                            <el-input v-model="item.min"></el-input>
                            <div style="margin:0 10px;">次以内</div>
                        </div>
                        <div class="form-item-row-column">{{ item.score }}</div>
                    </template>
                    <template v-else>
                        <div class="form-item-row-column">
                            <el-input v-model="item.min"></el-input>
                            <div style="margin:0 10px;">-</div>
                            <el-input v-model="item.max"></el-input>
                            <div style="margin:0 10px;">次</div>
                        </div>
                        <div class="form-item-row-column">{{ item.score }}</div>
                    </template>
                </div>
            </div>
            <div class="form-item">
                <div class="form-item-row header">
                    <div class="form-item-row-column">消费金额(M)</div>
                    <div class="form-item-row-column">分值</div>
                </div>
                <div
                    class="form-item-row"
                    v-for="(item, index) in mlist"
                    :key="index"
                >
                    <template v-if="item.score === 5">
                        <div class="form-item-row-column">
                            <el-input v-model="item.max"></el-input>
                            <div style="margin:0 10px;">元以上</div>
                        </div>
                        <div class="form-item-row-column">{{ item.score }}</div>
                    </template>
                    <template v-else-if="item.score === 1">
                        <div class="form-item-row-column">
                            <el-input v-model="item.min"></el-input>
                            <div style="margin:0 10px;">元以内</div>
                        </div>
                        <div class="form-item-row-column">{{ item.score }}</div>
                    </template>
                    <template v-else>
                        <div class="form-item-row-column">
                            <el-input v-model="item.min"></el-input>
                            <div style="margin:0 10px;">-</div>
                            <el-input v-model="item.max"></el-input>
                            <div style="margin:0 10px;">元</div>
                        </div>
                        <div class="form-item-row-column">{{ item.score }}</div>
                    </template>
                </div>
            </div>
        </div>
        <el-row
            type="flex"
            style="margin-top: 30px"
            justify="center"
            :gutter="10"
        >
            <el-button type="primary" size="medium" @click="onSubmit"
                >提交</el-button
            >
        </el-row>
    </div>
</template>

<script>
import { get, post } from "@/assets/js/http.js";

export default {
    name: "view-rfm-setup",
    data() {
        return {
            rlist: [],
            flist: [],
            mlist: []
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            const result = await get({
                url: "/admin/user.RealmeritUserRfmconfig/index",
                params: {}
            });
            this.rlist = result.rlist;
            this.flist = result.flist;
            this.mlist = result.mlist;
        },
        async onSubmit() {
            const rlist = JSON.parse(JSON.stringify(this.rlist));
            const flist = JSON.parse(JSON.stringify(this.flist));
            const mlist = JSON.parse(JSON.stringify(this.mlist));
            rlist.forEach(item => {
                delete item.store_id;
                delete item.createtime;
                delete item.updatetime;
            });
            flist.forEach(item => {
                delete item.store_id;
                delete item.createtime;
                delete item.updatetime;
            });
            mlist.forEach(item => {
                delete item.store_id;
                delete item.createtime;
                delete item.updatetime;
            });
            await post({
                url: "/admin/user.RealmeritUserRfmconfig/edit",
                data: rlist.concat(flist).concat(mlist)
            });
            this.$message.success("修改成功");
            this.getData();
        }
    }
};
</script>

<style scoped>
.module {
    margin: 20px 0;
    overflow: hidden;
    background-color: #fff;
}

.module-header {
    display: flex;
    align-items: center;
    padding: 20px 0;
    margin: 0 15px;
}

.module-header-title {
    font-size: 18px;
    font-weight: bold;
}

.module-header-subtitle {
    font-size: 14px;
    color: rgb(157, 158, 160);
    margin-left: 20px;
}

.form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 20px;
}

.form-item {
    flex-grow: 1;
    margin-right: 20px;
    border: 1px solid rgb(237, 240, 242);
}

.form-item:last-child {
    margin-right: 0;
}

.form-item-row {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 15px;
    font-size: 14px;
}

.form-item-row.header {
    background-color: rgb(247, 248, 250);
    border-bottom: 1px solid rgb(237, 240, 242);
}

.form-item-row-column:first-child {
    display: flex;
    align-items: center;
    width: 66.6%;
}

.form-item-row-column:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33.3%;
}

.form-item-row .el-input {
    width: 100px;
}
</style>